<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex flex-wrap align-center justify-between benben-position-layout flex myhb_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center myhb_fd0_0'>
        </view>
        <text class='myhb_fd0_1'>个人中心</text>
        <view class='flex flex-wrap align-center justify-end myhb_fd0_0'>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout myhb_flex_1">
        <view class='flex flex-wrap align-center myhb_fd1_0' @tap.stop="goziliaoFunc()" v-if="isLogin===true">
          <image class='myhb_fd1_0_c0' mode="aspectFill" :src='dataMessage.avatar'></image>
          <view class='flex flex-wrap align-stretch flex-sub myhb_fd1_0_c1_c0_c0 myhb_fd1_0_c1'>
            {{dataMessage.nickname}}
          </view>
          <image class='myhb_fd1_0_c2' mode="aspectFit" :src='STATIC_URL+"218.png"'></image>
        </view>
        <view class='flex flex-wrap align-center myhb_fd1_0' @tap.stop="toLoginDiy()" v-if="isLogin===false">
          <image class='myhb_fd1_1_c0' mode="aspectFit" :src='STATIC_URL+"219.png"'></image>
          <text class='myhb_fd1_1_c1'>{{$t('请登录')}}</text>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout myhb_flex_2">
        <view class='flex flex-direction align-stretch myhb_fd2_0'>
          <view class='flex flex-wrap align-center justify-between myhb_fd2_0_c0' @tap.stop="handleJumpDiy"
            data-type="navigateTo" :data-url="`/pages/wd/address/address`">
            <view class='flex flex-wrap align-center'>
              <image class='myhb_fd2_0_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"509.png"'></image>
              <text class='myhb_fd2_0_c0_c0_c1'>地址管理</text>
            </view>
            <image class='myhb_fd2_0_c0_c1' mode="aspectFit" :src='STATIC_URL+"510.png"'></image>
          </view>
          <view class='flex flex-wrap align-center justify-between myhb_fd2_0_c0' @tap.stop="handleJumpDiy"
            data-type="navigateTo" :data-url="`/pages/wd/myNews/myNews`">
            <view class='flex flex-wrap align-center'>
              <image class='myhb_fd2_0_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"511.png"'></image>
              <text class='myhb_fd2_0_c0_c0_c1'>我的消息</text>
            </view>
            <image class='myhb_fd2_0_c0_c1' mode="aspectFit" :src='STATIC_URL+"510.png"'></image>
          </view>
          <view class='flex flex-wrap align-center justify-between myhb_fd2_0_c0' @tap.stop="handleJumpDiy"
            data-type="navigateTo" :data-url="`/pages/wd/friendsLnvite/friendsLnvite`">
            <view class='flex flex-wrap align-center'>
              <image class='myhb_fd2_0_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"512.png"'></image>
              <text class='myhb_fd2_0_c0_c0_c1'>分享平台</text>
            </view>
            <image class='myhb_fd2_0_c0_c1' mode="aspectFit" :src='STATIC_URL+"510.png"'></image>
          </view>
          <view class='flex flex-wrap align-center justify-between myhb_fd2_0_c0' @tap.stop="handleJumpDiy"
            data-type="navigateTo" :data-url="`/pages/assemblys/PageContactUs/PageContactUs`">
            <view class='flex flex-wrap align-center'>
              <image class='myhb_fd2_0_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"513.png"'></image>
              <text class='myhb_fd2_0_c0_c0_c1'>联系我们</text>
            </view>
            <image class='myhb_fd2_0_c0_c1' mode="aspectFit" :src='STATIC_URL+"510.png"'></image>
          </view>
          <view class='flex flex-wrap align-center justify-between myhb_fd2_0_c0' @tap.stop="handleJumpDiy"
            data-type="navigateTo" :data-url="`/pages/xtsz/system/system`">
            <view class='flex flex-wrap align-center'>
              <image class='myhb_fd2_0_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"514.png"'></image>
              <text class='myhb_fd2_0_c0_c0_c1'>系统设置</text>
            </view>
            <image class='myhb_fd2_0_c0_c1' mode="aspectFit" :src='STATIC_URL+"510.png"'></image>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->


    </view>
  </view>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'

  export default {
    components: {},


    data() {
      return {
        "dataDetails": {
          "aid": "",
          "name": "",
          "levelid": "",
          "empirical": "",
          "icon": "",
          "discount": "",
          "content": "",
          "total_consumption_money": "",
          "intro": "",
          "speed": "",
          "next_speed": ""
        },
        "shopStat": "",
        "ShopState": {
          "joinin_state": "",
          "reason": ""
        },
        "messageNum": {
          "article": "",
          "message": "",
          "chat": "",
          "all": ""
        },
        dataMessage: ''
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },
      userInfo: {
        get() {
          return this.$store.state.userInfo
        },
        set() {
          this.$store.commit('updateUserInfo', value)
        },
      },
      isLogin() {
        return this.$store.state.token == '' ? false : true;
      }
    },
    watch: {},
    onLoad(options) {

    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      this.queryMessageFunc()
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {
      this.queryMessageFunc()
    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {

      //个人中心-获取会员详细信息
      async queryMessageFunc() {
        if (this.isLogin === true) {
          //请求方法
          //数据验证

          let data = await this.$api.get(global.apiUrls.post5c78c4772da97, {

          });

          if (data.data.code != 1) {
            this.$message.info(data.data.msg);
            return
          }

          let infouserInfo = data.data;
          this.dataMessage = infouserInfo.data
          console.log('dataMessage', this.dataMessage.avatar)
        }
      },
      //用户管理-会员当前等级详情
      async queryDetailsFunc() {
        if (this.isLogin === true) {
          //请求方法
          //数据验证

          let datadataDetails = await this.$api.get(global.apiUrls.post636de668c7eb0, {

          });

          if (datadataDetails.data.code != 1) {
            this.$message.info(datadataDetails.data.msg);
            return
          }
          let infodataDetails = datadataDetails.data;
          this.dataDetails = infodataDetails.data

        }
      },

      //跳转资料
      goziliaoFunc() {
        if (this.isLogin === true) {
          this.$urouter.navigateTo(`/pages/wd/myInfo/myInfo`);
        } else {
          this.toLoginDiy();
        }
      },
      //获取未读消息数量
      async getMessageNumFunc() {
        if (this.isLogin === true) {
          //请求方法
          //数据验证

          let datamessageNum = await this.$api.get(global.apiUrls.post64241ca6cf066, {

          });

          if (datamessageNum.data.code != 1) {
            this.$message.info(datamessageNum.data.msg);
            return
          }
          let infomessageNum = datamessageNum.data;
          this.messageNum = infomessageNum.data

        }
      },
      //关闭下拉刷新
      guanbiFunc() {
        if (this.isLogin === false) {
          uni.stopPullDownRefresh()
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: url(image-path('44.png')) no-repeat;
    background-size: 100% auto;
  }

  .myhb_flex_0 {
    background: url(image-path('44.png')) no-repeat;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .myhb_fd0_1 {
    color: var(--benbenFontColor3);
    font-size: 36rpx;
    font-weight: 500;
    line-height: 50rpx;
  }

  .myhb_fd0_0 {
    width: 200rpx;
    height: 88rpx;
  }

  .myhb_flex_1 {
    padding: 0rpx 48rpx 0rpx 56rpx;
  }

  .myhb_fd1_1_c1 {
    color: var(--benbenFontColor3);
    font-size: 40rpx;
    font-weight: 700;
    line-height: 56rpx;
  }

  .myhb_fd1_1_c0 {
    width: 124rpx;
    height: 124rpx;
    border-radius: 67rpx 67rpx 67rpx 67rpx;
    margin: 0rpx 32rpx 0rpx 0rpx;
  }

  .myhb_fd1_0_c2 {
    width: 10rpx;
    height: 18rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    // margin: 19rpx 0rpx 0rpx 0rpx;
  }

  .myhb_fd1_0_c1_c0_c0 {
    color: var(--benbenFontColor3);
    font-size: 40rpx;
    font-weight: 700;
    line-height: 56rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .myhb_fd1_0_c1 {
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .myhb_fd1_0_c0 {
    width: 124rpx;
    height: 124rpx;
    border-radius: 67rpx 67rpx 67rpx 67rpx;
  }

  .myhb_fd1_0 {
    margin: 40rpx 0rpx 0rpx 0rpx;
  }

  .myhb_flex_2 {
    padding: 0rpx 24rpx 0rpx 24rpx;
  }

  .myhb_fd2_0_c0_c1 {
    width: 10rpx;
    height: 20rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .myhb_fd2_0_c0_c0_c1 {
    font-size: 32rpx;
    font-weight: 600;
  }

  .myhb_fd2_0_c0_c0_c0 {
    width: 40rpx;
    height: 40rpx;
    margin: 0rpx 24rpx 0rpx 0rpx;
  }

  .myhb_fd2_0_c0 {
    line-height: 100rpx;
    height: 100rpx;
  }

  .myhb_fd2_0 {
    background: #FFFFFF;
    margin: 50rpx 0rpx 0rpx 0rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    width: 702rpx;
    padding: 0rpx 24rpx 0rpx 24rpx;
  }
</style>
